<div class="item item-divider" translate>LOCATION.LOCATION_DIVIDER</div>

<!-- street -->
<ion-item class="item-input item-floating-label item-button-right">
  <span class="input-label">{{'LOCATION.ADDRESS' | translate}}</span>
  <textarea placeholder="{{'LOCATION.ADDRESS_HELP' | translate}}"
            ng-model="formData.address"
            ng-model-options="{ debounce: 350 }"
            rows="4" cols="10">
              </textarea>
</ion-item>

<!-- city -->
<div class="item item-input item-floating-label"
     ng-class="{'item-input-error': form.$submitted && form.geoPoint.$invalid}">
  <span class="input-label" translate>LOCATION.CITY</span>
  <input type="text" placeholder="{{'LOCATION.CITY_HELP'|translate}}"
         ng-model="formData.city"
         ng-model-options="{ updateOn: 'blur' }"
         required-if="formData.address"
         ng-change="onCityChanged()">
</div>
<input type="hidden"
       name="geoPoint"
       ng-model="formData.geoPoint"
       required-if="formPosition.enable"
       geo-point>
<div class="form-errors"
     ng-show="form.$submitted && form.city.$error"
     ng-messages="form.city.$error">
  <div class="form-error" ng-message="required">
    <span translate="LOCATION.ERROR.CITY_REQUIRED_IF_STREET"></span>
  </div>
</div>
<div class="form-errors"
     ng-show="form.$submitted && form.geoPoint.$error"
     ng-messages="form.geoPoint.$error">
  <div class="form-error" ng-message="required">
    <span translate="LOCATION.ERROR.REQUIRED_FOR_LOCATION" ng-if="!formData.city"></span>
    <span translate="LOCATION.ERROR.INVALID_FOR_LOCATION" ng-if="formData.city"></span>
  </div>
  <div class="form-error" ng-message="geoPoint">
    <span translate="LOCATION.ERROR.REQUIRED_FOR_LOCATION" ng-if="!formData.city"></span>
    <span translate="LOCATION.ERROR.INVALID_FOR_LOCATION" ng-if="formData.city"></span>
  </div>
</div>


<!-- Position (lat/lon) -->
<div class="item row item-text-wrap no-padding">

  <div class="col no-padding">

    <!-- appear on map ? -->
    <ion-checkbox ng-model="formPosition.enable"
                  ng-change="onUseGeopointChanged()"
                  class="item item-border-large done in">
      <div class="item-content">
        <span translate>LOCATION.USE_GEO_POINT</span>
        <h4 class="gray" ng-if="formPosition.loading">
          <ion-spinner class="icon ion-spinner-small" icon="android"></ion-spinner>
          {{'LOCATION.LOADING_LOCATION'|translate}}
        </h4>
      </div>
    </ion-checkbox>
  </div>

  <div class="col col-10 no-padding" style="min-width: 60px;">
    <div class="row text-center">

      <a class="button button-stable button-small-padding"
         title="{{'LOCATION.BTN_GEOLOC_ADDRESS'|translate}}"
         ng-disabled="!formPosition.enable"
         ng-click="openSearchLocationModal()">
        <i class=" icon ion-home" style="left: 15px;"></i>
        <b class=" icon-secondary ion-search" style="top: -9px; left:32px; font-size: 18px;"></b>
      </a>

    </div>
  </div>
</div>


<cs-extension-point name="after-position"></cs-extension-point>
